<template>
  <Temp title="查询坐标（右键点击）">
    <div class="choose-point">
      <span>海拔：{{ altitude }}</span>
      <span>经度：{{ longitude }}</span>
      <span>维度：{{ latitude }}</span>
    </div>

    <div class="temp-close" @click="close"></div>
  </Temp>
</template>

<script>
import Temp from '@/components/utool/components/temp'
import { getAction } from '@/utils/helper'
import { writeText } from '@/utils/clipboard'

const _viewer = {}

const _clickHandler = {}

export default {
  name: 'index',
  components: {
    Temp
  },
  data() {
    return {
      altitude: '',
      longitude: '',
      latitude: ''
    }
  },
  inject: ['viewerId'],
  async created() {
    const { viewer } = await getAction(this.viewerId)
    _viewer[this.viewerId] = viewer

    _clickHandler[this.viewerId] =
      new Cesium.ScreenSpaceEventHandler(
        _viewer[this.viewerId].scene.canvas
      )
    _clickHandler[this.viewerId].setInputAction((e) => {
      // const pick = _viewer[this.viewerId].scene.pick(
      //   e.position
      // )
      // if (pick) {
      //   console.log('选中feature', pick)
      // } else {
      console.log('空白处', e)
      const position = new Cesium.Cartesian2(
        e.position.x,
        e.position.y
      )
      if (position) {
        // const cartesian = _viewer[
        //   this.viewerId
        // ].scene.globe.pick(
        //   _viewer[this.viewerId].camera.getPickRay(
        //     position
        //   ),
        //   _viewer[this.viewerId].scene
        // )
        const cartesian = _viewer[
          this.viewerId
        ].camera.pickEllipsoid(
          position,
          _viewer[this.viewerId].scene.globe.ellipsoid
        )
        if (cartesian) {
          // 世界坐标转地理坐标（弧度）
          const cartographic =
            _viewer[
              this.viewerId
            ].scene.globe.ellipsoid.cartesianToCartographic(
              cartesian
            )
          if (cartographic) {
            // 海拔
            let altitude =
              _viewer[this.viewerId].scene.globe.getHeight(
                cartographic
              )
            // 视角海拔高度
            // const he = Math.sqrt(viewer.scene.camera.positionWC.x * viewer.scene.camera.positionWC.x + viewer.scene.camera.positionWC.y * viewer.scene.camera.positionWC.y + viewer.scene.camera.positionWC.z * viewer.scene.camera.positionWC.z)
            // const he2 = Math.sqrt(cartesian.x * cartesian.x + cartesian.y * cartesian.y + cartesian.z * cartesian.z)
            // 地理坐标（弧度）转经纬度坐标
            let point = [
              (cartographic.longitude / Math.PI) * 180,
              (cartographic.latitude / Math.PI) * 180
            ]
            if (!altitude) {
              altitude = 0
            }
            if (!point) {
              point = [0, 0]
            }
            // console.log('视角高度', he - he2 + '米', '海拔', altitude + '米', '经度', point[0], '纬度', point[1])
            this.altitude = altitude.toFixed(6).toString()
            this.longitude = point[0].toFixed(6).toString()
            this.latitude = point[1].toFixed(6).toString()
            writeText(
              `(${point[0].toFixed(6)},${point[1].toFixed(
                6
              )},${altitude.toFixed(6)})`
            )

            // const writeResult = await writeText(`(${point[0].toFixed(6)},${point[1].toFixed(6)},${altitude.toFixed(6)})`)
            // if (writeResult === '写入成功') {
            //   this.$message.success('已复制当前点的经纬度、高度数据')
            // }
          }
        }
      }
      // }
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
  },
  beforeDestroy() {
    if (_clickHandler[this.viewerId]) {
      _clickHandler[this.viewerId].removeInputAction(
        Cesium.ScreenSpaceEventType.RIGHT_CLICK
      )
    }
  },
  methods: {
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="scss">
.choose-point {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: rgba(25, 59, 81, 1);
  padding: 18px 18px 26px 18px;

  span {
    user-select: text;
  }

  span + span {
    margin-top: 18px;
  }
}

.temp-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background-color: red;
  border-radius: 50%;
  cursor: pointer;

  &::after,
  &::before {
    content: '';
    width: 50%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff;
  }

  &::before {
    transform: translateX(-50%) translateY(-50%)
      rotateZ(45deg);
  }

  &::after {
    transform: translateX(-50%) translateY(-50%)
      rotateZ(-45deg);
  }
}
</style>
